<template>
    <div class="jianzhan-content">
        <crumb :name="$t('invoice.invoice')+'(IDR)'"></crumb>
        <search style="margin-bottom: 10px;">
            <el-select v-model="customer" :placeholder="$t('invoice.customer')" class="input" size="small" clearable>
                <el-option v-for="item in customerList" :value="item.customerName" :label="item.customerName"
                           :key="item.id"></el-option>
            </el-select>
            <el-select v-model="modelShow"
                       multiple
                       size="small"
                       style="width: 800px"
            >
                <el-option
                        v-for="item in modelList"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key">
                </el-option>
            </el-select>
            <el-button type="primary" size="small" icon="el-icon-search">{{$t('search')}}</el-button>
        </search>
        <div class="content">
            <div class="table-wrapper">
                <el-table
                        :data="reportList"
                        stripe
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="invoiceNumber"
                            width="250px"
                            :label="$t('invoiceNumber')"
                            fixed="left"
                    >
                    </el-table-column>
                    <el-table-column
                            v-if="show.invoiceDate"
                            width="150px"
                            prop="invoiceDate"
                            :label="$t('invoiceDate')"
                    >
                    </el-table-column>
                    <el-table-column
                            width="150px"
                            prop="startDate"
                            v-if="show.startTime"
                            :label="$t('invoice.startTime')">
                    </el-table-column>
                    <el-table-column
                            v-if="show.endTime"
                            width="150px"
                            prop="endDate"
                            :label="$t('invoice.endTime')">
                    </el-table-column>
                    <el-table-column
                            width="150px"
                            prop="customer"
                            v-if="show.customer"
                            :label="$t('invoice.customer')">
                    </el-table-column>
                    <el-table-column
                            width="150px"
                            prop="exchangeRate"
                            v-if="show.exchangeRate"
                            :label="$t('woInvoice.currency')">
                    </el-table-column>
                    <el-table-column
                            width="150px"
                            prop="paymentNoticeNo"
                            v-if="show.paymentNoticeNo"
                            :label="$t('woInvoice.paymentNoticeNo')">
                    </el-table-column>
                    <el-table-column
                            width="150px"
                            prop="item"
                            v-if="show.item"
                            :label="$t('woInvoice.item')">
                    </el-table-column>
                    <el-table-column
                            width="150px"
                            prop="pjbDate"
                            v-if="show.pjbDate"
                            :label="$t('woInvoice.pjbDate')">
                    </el-table-column>
                    <el-table-column
                            width="150px"
                            prop="partsPrice"
                            :label="$t('invoicePrice')">
                        <template slot-scope="scope">
                            <span>{{scope.row.partsPrice | m}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            :label="$t('detail')"
                            width="250"
                    >
                        <template slot-scope="scope">
                            <el-button type="text"
                                       icon="el-icon-money"
                                       size="mini"
                                       @click="pay(scope.row)">
                                {{$t('pay')}}
                            </el-button>
                            <el-button type="text"
                                       icon="el-icon-edit"
                                       size="mini"
                                       @click="showDetail(scope.row)">
                                {{$t('detail')}}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            :label="$t('operate')"
                            width="250"
                    >
                        <template slot-scope="scope">
                            <el-button type="text"
                                       size="mini"
                                       icon="el-icon-edit"
                                       @click="edit(scope.row)">
                                {{$t('edit')}}
                            </el-button>
                            <el-button type="text"
                                       size="mini"
                                       icon="el-icon-download"
                                       @click="downloadFile(scope.row)">
                                {{$t('download')}}
                            </el-button>
                            <el-button type="text"
                                       size="mini"
                                       icon="el-icon-delete"
                                       @click="deleteAll(scope.row)">
                                {{$t('delete')}}
                            </el-button>


                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
                :title="$t('detail')"
                width="90%"
                :visible.sync="dialogVisible"
                :before-close="beforeClose"
        >
            <el-table
                    :data="partList"
                    @row-dblclick="dbClick"
                    stripe
                    border
                    style="width: 100%">
                <el-table-column prop="stockOutNumber" :label="$t('stockOut.stockOutNo')"></el-table-column>
                <el-table-column prop="stockOutDate" :label="$t('stockOut.stockOutDate')"></el-table-column>
                <el-table-column prop="customer" :label="$t('invoice.customer')"></el-table-column>
                <el-table-column prop="partsNumber" :label="$t('part.partNo')"></el-table-column>
                <el-table-column prop="partsDescription" :label="$t('part.description')"></el-table-column>
                <el-table-column prop="outQuantity" :label="$t('part.qty')">
                    <template slot-scope="scope">
                        <span v-show="!scope.row.edit">{{scope.row.outQuantity}}</span>
                        <div v-show="scope.row.edit">
                            <el-input v-model="scope.row.outQuantity" size="mini" style="width: 80px"></el-input>
                        </div>
                    </template>

                </el-table-column>

                <el-table-column prop="partsSalePrice"
                                 :label="$t('part.salesPrice')">
                    <template slot-scope="scope">
                        <span v-show="!scope.row.edit">{{scope.row.partsSalePrice | m}}</span>
                        <div v-show="scope.row.edit">
                            <el-input v-model="scope.row.partsSalePrice" size="mini" style="width: 80px"></el-input>
                            <el-button type="text" size="small" @click="subPrice(scope.row)">{{$t('confirm')}}
                            </el-button>
                            <el-button type="text" size="small" @click="cancelPrice(scope.row)">{{$t('cancel')}}
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
                <!--<el-table-column-->
                <!--prop="columnProp"-->
                <!--:label="$t('operate')"-->
                <!--&gt;-->
                <!--<template slot-scope="scope">-->
                <!--<el-button type="text" icon="el-icon-delete" @click="deleteInvoice(scope.row)">-->
                <!--{{$t('delete')}}-->
                <!--</el-button>-->
                <!--</template>-->
                <!--</el-table-column>-->
            </el-table>
            <span slot="footer" class="dialog-footer">
            <el-button @click="close">{{$t('cancel')}}</el-button>
          </span>
        </el-dialog>
        <el-dialog
                title="Pay"
                :visible.sync="dialogVisible1"
                width="80%"
        >
            <el-button type="primary"
                       style="width: 100%"
                       @click="payList.push({
                                invoiceId:invoiceId,
                                paid:'',
                                unPaid:'',
                                invoiceDate:'',
                                receiptDate:'',
                                pidFile:'',
                                editable:true
            })">{{$t('add')}}
            </el-button>
            <el-table
                    :data="payList"
                    style="width: 100%">
                <el-table-column
                        label="Paid"
                        width="280">
                    <template slot-scope="scope">
                        <div v-if="scope.row.editable">
                            <el-input v-model="scope.row.paid" placeholder="Paid" size="small"></el-input>
                        </div>
                        <div v-else>
                            {{scope.row.paid}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="Unpaied"
                        width="280">
                    <template slot-scope="scope">
                        <div v-if="scope.row.editable">
                            <el-input v-model="scope.row.unPaid" placeholder="Unpaid" size="small"></el-input>
                        </div>
                        <div v-else>
                            {{scope.row.unPaid}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="Invoiced Date"
                        width="280">
                    <template slot-scope="scope">
                        <div v-if="scope.row.editable">
                            <el-date-picker v-model="scope.row.invoiceDate"
                                            value-format="yyyy-MM-dd"
                                            placeholder="Invoiced Date"
                                            size="small"></el-date-picker>
                        </div>
                        <div v-else>
                            {{scope.row.invoiceDate}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="Receipt Date"
                        width="280">
                    <template slot-scope="scope">
                        <div v-if="scope.row.editable">
                            <el-date-picker v-model="scope.row.receiptDate"
                                            value-format="yyyy-MM-dd"
                                            placeholder="Receipt Date"
                                            size="small"></el-date-picker>
                        </div>
                        <div v-else>
                            {{scope.row.receiptDate}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                >
                    <template slot-scope="scope">
                        <el-button type="text" v-show="scope.row.editable" @click="subPay(scope.row)">
                            {{$t('confirm')}}
                        </el-button>
                        <el-button type="text" v-show="!scope.row.editable" @click="editOrClose(scope.row)">
                            {{$t('edit')}}
                        </el-button>
                        <el-button type="text" v-show="scope.row.editable" @click="editOrClose(scope.row)">
                            {{$t('cancel')}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog
                :title="$t('edit')"
                :visible.sync="dialogVisible3"
                width="90%"
        >
            <el-form ref="form3"
                     :model="receipt"
                     label-width="180px">
                <el-form-item :label="$t('invoiceNumber')">
                    <el-input v-model="receipt.invoiceNumber"
                              :placeholder="$t('invoiceNumber')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('invoiceDate')">
                    <el-date-picker v-model="receipt.invoiceDate"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    :placeholder="$t('invoiceDate')"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('woInvoice.paymentNoticeNo')">
                    <el-input v-model="receipt.paymentNoticeNo"
                              :placeholder="$t('woInvoice.paymentNoticeNo')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('woInvoice.pjbDate')">
                    <el-date-picker v-model="receipt.pjbDate"
                                    :placeholder="$t('woInvoice.pjbDate')"
                                    value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('woInvoice.item')">
                    <el-input v-model="receipt.item"
                              :placeholder="$t('woInvoice.item')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible3 = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="modIdrInvoice">{{$t('confirm')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import crumb from '../common/crumb'
    import search from '../common/search'
    import {getSpecCustomer} from "../../api/customer";
    import {ERROR_OK} from "../../util/config";
    import {
        addPay,
        deleteAllInvoice,
        deleteIdrInvoice,
        idrInvoiceDetail,
        idrInvoiceList,
        modifyInvoiceRecipt,
        modIdrInvoice,
        payDetail
    } from "../../api/service";
    import {baseURL, money} from "../../util";

    export default {
        name: "idr-invoice",
        props: {
            belongModule: {
                type: Number
            },
        },
        filters: {
            m(a) {
                return money(a)
            }
        },
        data() {
            return {
                modelShow: ['invoiceDate', 'startTime', 'endTime', 'customer', 'exchangeRate', 'paymentNoticeNo', 'item', 'pjbDate'],
                modelList: [
                    {key: 'invoiceDate', value: this.$t('invoiceDate')},
                    {key: 'startTime', value: this.$t('invoice.startTime')},
                    {key: 'endTime', value: this.$t('invoice.endTime')},
                    {key: 'customer', value: this.$t('invoice.customer')},
                    {key: 'exchangeRate', value: this.$t('woInvoice.currency')},
                    {key: 'paymentNoticeNo', value: this.$t('woInvoice.paymentNoticeNo')},
                    {key: 'item', value: this.$t('woInvoice.item')},
                    {key: 'pjbDate', value: this.$t('woInvoice.pjbDate')},
                ],
                receipt: {},
                customerList: [],
                payList: [],
                invoiceId: '',
                customer: '',
                reportList: [],
                partList: [],
                dialogVisible: false,
                dialogVisible1: false,
                dialogVisible3: false
            }
        },
        computed: {
            show() {
                console.log(this.modelShow);
                if (this.modelShow && this.modelShow.length) {
                    let show = {}
                    this.modelShow.forEach(item => {
                        show[item] = true
                    });
                    return show
                } else {
                    return {}
                }
            }
        },
        created() {
            this.getCustomerList();
            this.getList();
        },
        methods: {
            async modIdrInvoice() {
                const {
                    id,
                    invoiceNumber,
                    invoiceDate,
                    paymentNoticeNo,
                    pjbDate,
                    item
                } = this.receipt
                const {status, msg} = await modIdrInvoice({
                    id,
                    invoiceNumber,
                    invoiceDate,
                    paymentNoticeNo,
                    pjbDate,
                    item
                })
                if (status === ERROR_OK) {
                    this.$message.success(this.$t('success'))
                    this.dialogVisible3 = false
                } else {
                    this.$message.error(msg)
                }
            },
            edit(row) {
                this.receipt = row;
                this.dialogVisible3 = true
            },
            editOrClose(row) {
                this.$set(row, 'editable', !row.editable)
            },
            async subPay(row) {
                const {status, msg} = await addPay({
                    id: row.id,
                    invoiceId: row.invoiceId,
                    paid: row.paid,
                    unPaid: row.unPaid,
                    invoiceDate: row.invoiceDate,
                    receiptDate: row.receiptDate,
                    pidFile: ''
                })
                if (status === ERROR_OK) {
                    this.$message.success(this.$t('success'))
                    row.editable = false
                } else {
                    this.$message.error(msg)
                }
            },
            async pay(row) {
                this.invoiceId = row.id
                const {status, data, msg} = await payDetail(row.id)
                if (status === ERROR_OK) {
                    this.payList = data
                } else {
                    this.payList = []
                    this.$message.error(msg)
                }
                this.dialogVisible1 = true
            },
            deleteAll(row) {
                this.$confirm(this.$t('shouldDelete'), this.$t('delete'), {
                    cancelButtonText: this.$t('cancel'),
                    confirmButtonText: this.$t('confirm')
                }).then(async () => {
                    const {status, msg} = await deleteAllInvoice(row.id);
                    if (status === ERROR_OK) {
                        this.$message.success(this.$t('deleteSuccess'));
                        this.getList();
                    } else {
                        this.$message.error(msg)
                    }
                })
            },
            downloadFile(row) {
                window.open(baseURL + '/parts_stock_out_invoice/manage//export_invoice_excel.file?id=' + row.id);
            },
            deleteInvoice(row) {
                this.$confirm(this.$t('shouldDelete'), this.$t('delete'), {
                    cancelButtonText: this.$t('cancel'),
                    confirmButtonText: this.$t('confirm')
                }).then(async () => {
                    const {status, msg} = await deleteIdrInvoice(row.id);
                    if (status === ERROR_OK) {
                        this.reportList.splice(this.reportList.findIndex(item => item.id === row.id), 1);
                        this.$message.success(this.$t('deleteSuccess'))
                    } else {
                        this.$message.error(msg)
                    }
                }).catch(() => {
                    this.$message.warning()
                })
            },
            beforeClose(done) {
                this.getList();
                done()
            },
            close() {
                this.dialogVisible = false;
            },
            async subPrice(row) {
                const {status, msg} = await modifyInvoiceRecipt({
                    id: row.invoiceId,
                    outQuantity: row.outQuantity,
                    partSalePrice: row.partsSalePrice
                });
                if (status === ERROR_OK) {
                    this.$set(row, 'edit', false);
                    this.$message.success(this.$t('modifySuccess'))
                } else {
                    this.message.error(msg)
                }

            },
            cancelPrice(row) {
                this.$set(row, 'edit', false)
            },
            dbClick(row) {
                this.$set(row, 'edit', true)
            },
            async showDetail(row) {
                const {status, data} = await idrInvoiceDetail(row.id);
                if (status === ERROR_OK) {
                    this.partList = data;
                    this.dialogVisible = true
                } else {
                    this.partList = []
                }
            },
            async getList() {
                const {status, data} = await idrInvoiceList({customer: this.customer, belongModule: this.belongModule});
                if (status === ERROR_OK) {
                    if (status === ERROR_OK) {
                        this.reportList = data
                    } else {
                        this.reportList = []
                    }
                }
            },
            async getCustomerList() {
                const {status, data} = await getSpecCustomer();
                if (status === ERROR_OK) {
                    this.customerList = data
                }
            },
        },
        components: {
            crumb,
            search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .content {
        @include content
    }
</style>